import Image from 'next/legacy/image'
import Section from '../section'
import RightArrow from '../../svg/arrow-right'
import AppPreviewImage from '@/public/static/images/preview/rubick-preview-1.png'
import styles from './preview.module.css'

const Preview = () => (
  <Section>
    <div className={styles.split}>
      <div className={styles.preview}>
        <Image
          src={AppPreviewImage}
          placeholder="blur"
          width={1248}
          height={770}
          alt="rubick preview Image"
          className={styles.previewImage}
          layout="responsive"
        />
      </div>
      <div className={styles.container}>
        <div className={`${styles.previewDescription} ${styles.text}`}>
          <h3>更便捷的搜索模式</h3>
          <p>快捷键「Alt + R」，呼出 Rubick 搜索框，支持系统应用和插件搜索。</p>
          <a target="_blank" href="https://rubickcenter.github.io/docs/">
            <span>Rubick 使用指南</span>
            <i className={styles.arrow}>
              <RightArrow />
            </i>
          </a>
        </div>
      </div>
    </div>
  </Section>
)

export default Preview
